<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<body>
    <!-- 简约页脚 -->
    <footer th:fragment="footer" class="footer py-3 bg-dark text-white">
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-2 mb-md-0">
                    <p class="mb-0">校园二手书交易平台 &copy; <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}">2023</span></p>
                </div>
                <div class="col-md-6 text-md-right">
                    <a th:href="@{/}" class="text-white mr-3">首页</a>
                    <a th:href="@{/book/list}" class="text-white mr-3">书籍列表</a>
                    <a th:href="@{/book/publish}" class="text-white">发布书籍</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript Fragment -->
    <div th:fragment="scripts">
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
        <script th:src="@{/static/js/common.js}"></script>
        
        <!-- 回到顶部按钮 -->
        <a id="back-to-top" href="#" class="btn btn-sm back-to-top" role="button">
            <i class="fas fa-chevron-up"></i>
        </a>
        
        <script>
            $(document).ready(function() {
                // 当滚动超过 300px 显示回到顶部按钮
                $(window).scroll(function() {
                    if ($(this).scrollTop() > 300) {
                        $('#back-to-top').fadeIn();
                    } else {
                        $('#back-to-top').fadeOut();
                    }
                });
                
                // 点击回到顶部
                $('#back-to-top').click(function(e) {
                    e.preventDefault();
                    $('html, body').animate({scrollTop: 0}, 300);
                    return false;
                });
            });
        </script>
        
        <style>
            .footer {
                font-size: 0.9rem;
            }
            
            .footer a {
                transition: opacity 0.3s;
            }
            
            .footer a:hover {
                opacity: 0.8;
                text-decoration: none;
            }
            
            .back-to-top {
                position: fixed;
                bottom: 20px;
                right: 20px;
                display: none;
                width: 35px;
                height: 35px;
                line-height: 35px;
                background-color: #343a40;
                color: #fff;
                text-align: center;
                border-radius: 50%;
                z-index: 99;
            }
            
            .back-to-top:hover {
                color: #fff;
                background-color: #23272b;
            }
        </style>
    </div>
</body>
</html> 